<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
		<title>
			编码规范 by @mdo
		</title>
		<!--<link rel="stylesheet" href="css/code-guide.css">-->
</head>

	<body>

		<header class="masthead bg-primary">
			<div class="container text-center">
				<h1>编码规范 by @mdo</h1>
			</div>
		</header>
		<div class="panel toc clearfix">
			<h2 class="panel-heading">目录</h2>
			<div class="col-md-6">
				<h4><a href="#html">HTML</a></h4>
				<ul>
					<li>
						<a href="#html-syntax">语法</a>
					</li>
					<li>
						<a href="#html-doctype">HTML5 doctype</a>
					</li>
					<li>
						<a href="#html-lang">语言属性（Language attribute）</a>
					</li>
					<li>
						<a href="#html-encoding">字符编码</a>
					</li>
					<li>
						<a href="#html-ie-compatibility-mode">IE 兼容模式</a>
					</li>
					<li>
						<a href="#html-style-script">引入 CSS 和 JavaScript 文件</a>
					</li>
					<li>
						<a href="#html-practicality">实用为王</a>
					</li>
					<li>
						<a href="#html-attribute-order">属性顺序</a>
					</li>
					<li>
						<a href="#html-boolean-attributes">布尔（boolean）型属性</a>
					</li>
					<li>
						<a href="#html-reducing-markup">减少标签的数量</a>
					</li>
					<li>
						<a href="#html-javascript">JavaScript 生成的标签</a>
					</li>
				</ul>
			</div>
			<div class="col-md-6">
				<h4><a href="#css">CSS</a></h4>
				<ul>
					<li>
						<a href="#css-syntax">语法</a>
					</li>
					<li>
						<a href="#css-declaration-order">声明顺序</a>
					</li>
					<li>
						<a href="#css-media-queries">媒体查询（Media query）的位置</a>
					</li>
					<li>
						<a href="#css-prefixed-properties">带前缀的属性</a>
					</li>
					<li>
						<a href="#css-single-declarations">单行规则声明</a>
					</li>
					<li>
						<a href="#css-shorthand">简写形式的属性声明</a>
					</li>
					<li>
						<a href="#css-nesting">Less 和 Sass 中的嵌套</a>
					</li>
					<li>
						<a href="#css-comments">注释</a>
					</li>
					<li>
						<a href="#css-classes">class 命名</a>
					</li>
					<li>
						<a href="#css-selectors">选择器</a>
					</li>
					<li>
						<a href="#css-organization">代码组织</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="panel">
			
		<div class="panel-body" id="golden-rule">
			<div class="col">
				<h2>黄金定律</h2>
				<p>永远遵循同一套编码规范 -- 可以是这里列出的，也可以是你自己总结的。如果你发现本规范中有任何错误，敬请指正。通过
					<a href="https://github.com/mdo/code-guide/issues/new">open an issue on GitHub</a>为本规范添加或贡献内容。</p>
			</div>
			<div class="col">
				<blockquote>
					<p>不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。</p>
				</blockquote>
			</div>
		</div>

		<div class="heading" id="html">
			<h2>HTML</h2>
		</div>

		<div class="panel-body" id="html-syntax">
			<div class="col">
				<h3>语法</h3>
				<ul>
					<li>用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。</li>
					<li>嵌套元素应当缩进一次（即两个空格）。</li>
					<li>对于属性的定义，确保全部使用双引号，绝不要使用单引号。</li>
					<li>不要在自闭合（self-closing）元素的尾部添加斜线 --
						<a href="http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag">HTML5 规范</a>中明确说明这是可选的。</li>
					<li>不要省略可选的结束标签（closing tag）（例如，<code>&lt;/li&gt;</code> 或 <code>&lt;/body&gt;</code>）。</li>
				</ul>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Page title<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;images/company-logo.png&quot;</span> <span class="na">alt=</span><span class="s">&quot;Company&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;hello-world&quot;</span><span class="nt">&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="html-doctype">
			<div class="col">
				<h3>HTML5 doctype</h3>
				<p>为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
  <span class="nt">&lt;head&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="html-lang">
			<div class="col">
				<h3>语言属性</h3>
				<p>根据 HTML5 规范：</p>
				<blockquote>
					<p>强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。</p>
				</blockquote>
				<p>更多关于 <code>lang</code> 属性的知识可以从
					<a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element">此规范</a> 中了解。</p>
				<p>这里列出了
					<a href="http://reference.sitepoint.com/html/lang-codes">语言代码表</a>。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="html"><span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;zh-CN&quot;</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- ... --&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="html-ie-compatibility-mode">
			<div class="col">
				<h3>IE 兼容模式</h3>
				<p>IE 支持通过特定的 <code>&lt;meta&gt;</code> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 <strong>edge mode</strong>，从而通知 IE 采用其所支持的最新的模式。</p>
				<p>
					<a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e">阅读这篇 stack overflow 上的文章</a>可以获得更多有用的信息。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="html"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">&quot;X-UA-Compatible&quot;</span> <span class="na">content=</span><span class="s">&quot;IE=Edge&quot;</span><span class="nt">&gt;</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="html-encoding">
			<div class="col">
				<h3>字符编码</h3>
				<p>通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="html"><span class="nt">&lt;head&gt;</span>
  <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">&quot;UTF-8&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="html-style-script">
			<div class="col">
				<h3>引入 CSS 和 JavaScript 文件</h3>
				<p>根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 <code>type</code> 属性，因为 <code>text/css</code> 和 <code>text/javascript</code> 分别是它们的默认值。</p>
				<h4>HTML5 spec links</h4>
				<ul>
					<li>
						<a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element">Using link</a>
					</li>
					<li>
						<a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element">Using style</a>
					</li>
					<li>
						<a href="http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element">Using script</a>
					</li>
				</ul>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- External CSS --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;code-guide.css&quot;</span><span class="nt">&gt;</span>

<span class="c">&lt;!-- In-document CSS --&gt;</span>
<span class="nt">&lt;style&gt;</span>
  <span class="c">/* ... */</span>
<span class="nt">&lt;/style&gt;</span>

<span class="c">&lt;!-- JavaScript --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;code-guide.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="html-practicality">
			<div class="col">
				<h3>实用为王</h3>
				<p>尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。</p>
			</div>
		</div>

		<div class="panel-body" id="html-attribute-order">
			<div class="col">
				<h3>属性顺序</h3>
				<p>HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。</p>
				<ul>
					<li><code>class</code></li>
					<li><code>id</code>, <code>name</code></li>
					<li><code>data-*</code></li>
					<li><code>src</code>, <code>for</code>, <code>type</code>, <code>href</code></li>
					<li><code>title</code>, <code>alt</code></li>
					<li><code>aria-*</code>, <code>role</code></li>
				</ul>
				<p>class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;...&quot;</span> <span class="na">id=</span><span class="s">&quot;...&quot;</span> <span class="na">data-modal=</span><span class="s">&quot;toggle&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
  Example link
<span class="nt">&lt;/a&gt;</span>

<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span><span class="nt">&gt;</span>

<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;...&quot;</span> <span class="na">alt=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="html-boolean-attributes">
			<div class="col">
				<h3>布尔（boolean）型属性</h3>
				<p>布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。</p>
				<p>更多信息请参考
					<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes">WhatWG panel-body on boolean attributes</a>：</p>
				<blockquote>
					<p>元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。</p>
				</blockquote>
				<p>如果<em>一定</em>要为其赋值的话，请参考 WhatWG 规范：</p>
				<blockquote>
					<p>如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要再收尾添加空白符。</p>
				</blockquote>
				<p><strong>简单来说，就是不用赋值。</strong></p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="html"><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">disabled</span><span class="nt">&gt;</span>

<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">value=</span><span class="s">&quot;1&quot;</span> <span class="na">checked</span><span class="nt">&gt;</span>

<span class="nt">&lt;select&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;1&quot;</span> <span class="na">selected</span><span class="nt">&gt;</span>1<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="html-reducing-markup">
			<div class="col">
				<h3>减少标签的数量</h3>
				<p>编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- Not so great --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;avatar&quot;</span><span class="nt">&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>

<span class="c">&lt;!-- Better --&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">&quot;avatar&quot;</span> <span class="na">src=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="html-javascript">
			<div class="col">
				<h3>JavaScript 生成的标签</h3>
				<p>通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。</p>
			</div>
		</div>

		<div class="heading" id="css">
			<h2>CSS</h2>
		</div>

		<div class="panel-body" id="css-syntax">
			<div class="col">
				<h3>语法</h3>
				<ul>
					<li>用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。</li>
					<li>为选择器分组时，将单独的选择器单独放在一行。</li>
					<li>为了代码的易读性，在每个声明块的左花括号前添加一个空格。</li>
					<li>声明块的右花括号应当单独成行。</li>
					<li>每条声明语句的 <code>:</code> 后应该插入一个空格。</li>
					<li>为了获得更准确的错误报告，每条声明都应该独占一行。</li>
					<li>所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。</li>
					<li>对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，<code>box-shadow</code>）。</li>
					<li>不要在 <code>rgb()</code>、<code>rgba()</code>、<code>hsl()</code>、<code>hsla()</code> 或 <code>rect()</code> 值的<em>内部</em>的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。</li>
					<li>对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，<code>.5</code> 代替 <code>0.5</code>；<code>-.5px</code> 代替 <code>-0.5px</code>）。</li>
					<li>十六进制值应该全部小写，例如，<code>#fff</code>。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。</li>
					<li>尽量使用简写形式的十六进制值，例如，用 <code>#fff</code> 代替 <code>#ffffff</code>。</li>
					<li>为选择器中的属性添加双引号，例如，<code>input[type="text"]</code>。
						<a href="http://mathiasbynens.be/notes/unquoted-attribute-values#css">只有在某些情况下是可选的</a>，但是，为了代码的一致性，建议都加上双引号。</li>
					<li>避免为 0 值指定单位，例如，用 <code>margin: 0;</code> 代替 <code>margin: 0px;</code>。</li>
				</ul>
				<p>对于这里用到的术语有疑问吗？请参考 Wikipedia 上的
					<a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax">syntax panel-body of the Cascading Style Sheets article</a>。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="css"><span class="c">/* Bad CSS */</span>
<span class="nc">.selector</span><span class="o">,</span> <span class="nc">.selector-secondary</span><span class="o">,</span> <span class="nc">.selector</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">text</span><span class="o">]</span> <span class="p">{</span>
  <span class="k">padding</span><span class="o">:</span><span class="m">15px</span><span class="p">;</span>
  <span class="k">margin</span><span class="o">:</span><span class="m">0px</span> <span class="m">0px</span> <span class="m">15px</span><span class="p">;</span>
  <span class="k">background-color</span><span class="o">:</span><span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">);</span>
  <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span><span class="m">0px</span> <span class="m">1px</span> <span class="m">2px</span> <span class="m">#CCC</span><span class="o">,</span><span class="k">inset</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">0</span> <span class="m">#FFFFFF</span>
<span class="p">}</span>

<span class="c">/* Good CSS */</span>
<span class="nc">.selector</span><span class="o">,</span>
<span class="nc">.selector-secondary</span><span class="o">,</span>
<span class="nc">.selector</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span><span class="o">]</span> <span class="p">{</span>
  <span class="k">padding</span><span class="o">:</span> <span class="m">15px</span><span class="p">;</span>
  <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">15px</span><span class="p">;</span>
  <span class="k">background-color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">5</span><span class="p">);</span>
  <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">2px</span> <span class="m">#ccc</span><span class="o">,</span> <span class="k">inset</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">0</span> <span class="m">#fff</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-declaration-order">
			<div class="col">
				<h3>声明顺序</h3>
				<p>相关的属性声明应当归为一组，并按照下面的顺序排列：</p>
				<ol>
					<li>Positioning</li>
					<li>Box model</li>
					<li>Typographic</li>
					<li>Visual</li>
				</ol>
				<p>由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。</p>
				<p>其他属性只是影响组件的<em>内部（inside）</em>或者是不影响前两组属性，因此排在后面。</p>
				<p>完整的属性列表及其排列顺序请参考
					<a href="http://twitter.github.com/recess">Recess</a>。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="css"><span class="nc">.declaration-order</span> <span class="p">{</span>
  <span class="c">/* Positioning */</span>
  <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
  <span class="k">top</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">right</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">left</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">z-index</span><span class="o">:</span> <span class="m">100</span><span class="p">;</span>

  <span class="c">/* Box-model */</span>
  <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span>
  <span class="k">float</span><span class="o">:</span> <span class="k">right</span><span class="p">;</span>
  <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>
  <span class="k">height</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>

  <span class="c">/* Typography */</span>
  <span class="k">font</span><span class="o">:</span> <span class="k">normal</span> <span class="m">13px</span> <span class="s2">&quot;Helvetica Neue&quot;</span><span class="o">,</span> <span class="k">sans-serif</span><span class="p">;</span>
  <span class="k">line-height</span><span class="o">:</span> <span class="m">1</span><span class="o">.</span><span class="m">5</span><span class="p">;</span>
  <span class="k">color</span><span class="o">:</span> <span class="m">#333</span><span class="p">;</span>
  <span class="k">text-align</span><span class="o">:</span> <span class="k">center</span><span class="p">;</span>

  <span class="c">/* Visual */</span>
  <span class="k">background-color</span><span class="o">:</span> <span class="m">#f5f5f5</span><span class="p">;</span>
  <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="m">#e5e5e5</span><span class="p">;</span>
  <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>

  <span class="c">/* Misc */</span>
  <span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-import">
			<div class="col">
				<h3>不要使用 <code>@import</code></h3>
				<p>与 <code>&lt;link&gt;</code> 标签相比，<code>@import</code> 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：</p>
				<ul>
					<li>使用多个 <code>&lt;link&gt;</code> 元素</li>
					<li>通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件</li>
					<li>通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能</li>
				</ul>
				<p>请参考
					<a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">Steve Souders 的文章</a>了解更多知识。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- Use link elements --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;core.css&quot;</span><span class="nt">&gt;</span>

<span class="c">&lt;!-- Avoid @imports --&gt;</span>
<span class="nt">&lt;style&gt;</span>
  <span class="k">@import</span> <span class="nt">url</span><span class="o">(</span><span class="s2">&quot;more.css&quot;</span><span class="o">)</span><span class="p">;</span>
<span class="nt">&lt;/style&gt;</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-media-queries">
			<div class="col">
				<h3>媒体查询（Media query）的位置</h3>
				<p>将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="css"><span class="nc">.element</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.element-avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.element-selected</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>

<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">480px</span><span class="o">)</span> <span class="p">{</span>
  <span class="nc">.element</span> <span class="p">{</span> <span class="o">...</span><span class="p">}</span>
  <span class="nc">.element-avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
  <span class="nc">.element-selected</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-prefixed-properties">
			<div class="col">
				<h3>带前缀的属性</h3>
				<p>当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。</p>
				<p>在 Textmate 中，使用 <strong>Text &rarr; Edit Each Line in Selection</strong> (&#8963;&#8984;A)。在 Sublime Text 2 中，使用 <strong>Selection &rarr; Add Previous Line</strong> (&#8963;&#8679;&uarr;) 和 <strong>Selection &rarr;  Add Next Line</strong> (&#8963;&#8679;&darr;)。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="css"><span class="c">/* Prefixed properties */</span>
<span class="nc">.selector</span> <span class="p">{</span>
  <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">2px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">15</span><span class="p">);</span>
          <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">2px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">15</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-single-declarations">
			<div class="col">
				<h3>单行规则声明</h3>
				<p>对于<strong>只包含一条声明</strong>的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。</p>
				<p>这样做的关键因素是为了错误检测 -- 例如，CSS 校验器指出在 183 行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="css"><span class="c">/* Single declarations on one line */</span>
<span class="nc">.span1</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">60px</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.span2</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">140px</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.span3</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">220px</span><span class="p">;</span> <span class="p">}</span>

<span class="c">/* Multiple declarations, one per line */</span>
<span class="nc">.sprite</span> <span class="p">{</span>
  <span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;</span>
  <span class="k">width</span><span class="o">:</span> <span class="m">16px</span><span class="p">;</span>
  <span class="k">height</span><span class="o">:</span> <span class="m">15px</span><span class="p">;</span>
  <span class="k">background-image</span><span class="o">:</span> <span class="sx">url(../img/sprite.png)</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.icon</span>           <span class="p">{</span> <span class="k">background-position</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.icon-home</span>      <span class="p">{</span> <span class="k">background-position</span><span class="o">:</span> <span class="m">0</span> <span class="m">-20px</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.icon-account</span>   <span class="p">{</span> <span class="k">background-position</span><span class="o">:</span> <span class="m">0</span> <span class="m">-40px</span><span class="p">;</span> <span class="p">}</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-shorthand">
			<div class="col">
				<h3>简写形式的属性声明</h3>
				<p>在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：</p>
				<ul>
					<li><code>padding</code></li>
					<li><code>margin</code></li>
					<li><code>font</code></li>
					<li><code>background</code></li>
					<li><code>border</code></li>
					<li><code>border-radius</code></li>
				</ul>
				<p>大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。</p>
				<p>MDN（Mozilla Developer Network）上一片非常好的关于
					<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">shorthand properties</a> 的文章，对于不太熟悉简写属性声明及其行为的用户很有用。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="css"><span class="c">/* Bad example */</span>
<span class="nc">.element</span> <span class="p">{</span>
  <span class="k">margin</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10px</span><span class="p">;</span>
  <span class="k">background</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
  <span class="k">background</span><span class="o">:</span> <span class="sx">url(&quot;image.jpg&quot;)</span><span class="p">;</span>
  <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span> <span class="m">3px</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Good example */</span>
<span class="nc">.element</span> <span class="p">{</span>
  <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
  <span class="k">background-color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
  <span class="k">background-image</span><span class="o">:</span> <span class="sx">url(&quot;image.jpg&quot;)</span><span class="p">;</span>
  <span class="k">border-top</span><span class="o">-</span><span class="k">left</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
  <span class="k">border-top</span><span class="o">-</span><span class="k">right</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-nesting">
			<div class="col">
				<h3>Less 和 Sass 中的嵌套</h3>
				<p>避免非必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="scss"><span class="c1">// Without nesting</span>
<span class="nc">.table</span> <span class="o">&gt;</span> <span class="nt">thead</span> <span class="o">&gt;</span> <span class="nt">tr</span> <span class="o">&gt;</span> <span class="nt">th</span> <span class="p">{</span> <span class="err">…</span> <span class="p">}</span>
<span class="nc">.table</span> <span class="o">&gt;</span> <span class="nt">thead</span> <span class="o">&gt;</span> <span class="nt">tr</span> <span class="o">&gt;</span> <span class="nt">td</span> <span class="p">{</span> <span class="err">…</span> <span class="p">}</span>

<span class="c1">// With nesting</span>
<span class="nc">.table</span> <span class="o">&gt;</span> <span class="nt">thead</span> <span class="o">&gt;</span> <span class="nt">tr</span> <span class="p">{</span>
  <span class="o">&gt;</span> <span class="nt">th</span> <span class="p">{</span> <span class="err">…</span> <span class="p">}</span>
  <span class="o">&gt;</span> <span class="nt">td</span> <span class="p">{</span> <span class="err">…</span> <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-comments">
			<div class="col">
				<h3>注释</h3>
				<p>代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。</p>
				<p>对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="css"><span class="c">/* Bad example */</span>
<span class="c">/* Modal header */</span>
<span class="nc">.modal-header</span> <span class="p">{</span>
  <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* Good example */</span>
<span class="c">/* Wrapping element for .modal-title and .modal-close */</span>
<span class="nc">.modal-header</span> <span class="p">{</span>
  <span class="o">...</span>
<span class="p">}</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-classes">
			<div class="col">
				<h3>class 命名</h3>
				<ul>
					<li>class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，<code>.btn</code> 和 <code>.btn-danger</code>）。</li>
					<li>避免过度任意的简写。<code>.btn</code> 代表 <em>button</em>，但是 <code>.s</code> 不能表达任何意思。</li>
					<li>class 名称应当尽可能短，并且意义明确。</li>
					<li>使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。</li>
					<li>基于最近的父 class 或基本（base） class 作为新 class 的前缀。</li>
					<li>使用 <code>.js-*</code> class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。</li>
				</ul>
				<p>在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。</p>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="css"><span class="c">/* Bad example */</span>
<span class="nc">.t</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.red</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.header</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>

<span class="c">/* Good example */</span>
<span class="nc">.tweet</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.important</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.tweet-header</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-selectors">
			<div class="col">
				<h3>选择器</h3>
				<ul>
					<li>对于通用元素使用 class ，这样利于渲染性能的优化。</li>
					<li>对于经常出现的组件，避免使用属性选择器（例如，<code>[class^="..."]</code>）。浏览器的性能会受到这些因素的影响。</li>
					<li>选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。</li>
					<li><strong>只有</strong>在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。</li>
				</ul>
				<p>扩展阅读：</p>
				<ul>
					<li>
						<a href="http://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/">Scope CSS classes with prefixes</a>
					</li>
					<li>
						<a href="http://markdotto.com/2012/03/02/stop-the-cascade/">Stop the cascade</a>
					</li>
				</ul>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="css"><span class="c">/* Bad example */</span>
<span class="nt">span</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.page-container</span> <span class="nf">#stream</span> <span class="nc">.stream-item</span> <span class="nc">.tweet</span> <span class="nc">.tweet-header</span> <span class="nc">.username</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>

<span class="c">/* Good example */</span>
<span class="nc">.avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.tweet-header</span> <span class="nc">.username</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.tweet</span> <span class="nc">.avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-organization">
			<div class="col">
				<h3>代码组织</h3>
				<ul>
					<li>以组件为单位组织代码段。</li>
					<li>制定一致的注释规范。</li>
					<li>使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。</li>
					<li>如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。</li>
				</ul>
			</div>
			<div class="col">
				<div class="highlight"><pre><code class="css"><span class="c">/*</span>
<span class="c"> * Component panel-body heading</span>
<span class="c"> */</span>

<span class="nc">.element</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>


<span class="c">/*</span>
<span class="c"> * Component panel-body heading</span>
<span class="c"> *</span>
<span class="c"> * Sometimes you need to include optional context for the entire component. Do that up here if it&#39;s important enough.</span>
<span class="c"> */</span>

<span class="nc">.element</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>

<span class="c">/* Contextual sub-component or modifer */</span>
<span class="nc">.element-heading</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
</code></pre></div>
			</div>
		</div>

		<div class="panel-body" id="css-editor-prefs">
			<div class="col">
				<h3>编辑器配置</h3>
				<p>将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：</p>
				<ul>
					<li>用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。</li>
					<li>保存文件时，删除尾部的空白符。</li>
					<li>设置文件编码为 UTF-8。</li>
					<li>在文件结尾添加一个空白行。</li>
				</ul>
				<p>参照文档并将这些配置信息添加到项目的 <code>.editorconfig</code> 文件中。例如：
					<a href="https://github.com/twbs/bootstrap/blob/master/.editorconfig">Bootstrap 中的 .editorconfig 实例</a>。更多信息请参考
					<a href="http://editorconfig.org">about EditorConfig</a>。</p>
			</div>
		</div>

		</div>
	

</body>

</html>